<template>
  <div class="poscontent">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="tabpostion">
      <el-tab-pane
        v-for="(item, index) in plantList"
        :key="index"
        :label="item.name"
        :name="item.id + ''"
      >
        <advposition-index v-if="activeName == item.id" :plateId="activeName" />
      </el-tab-pane>
    </el-tabs>
    <!-- <div
      v-for="(item, index) in plantList"
      :key="index"
      class="f_item f-14 commhover"
      :class="{ active: active == item.id }"
      @click="changeItem(item)"
    >
      {{ item.name }}
    </div>
    <div class="flowcontent" :key="keys">
      <advposition-index :plateId="active" />
    </div> -->
  </div>
</template>

<script>
import AdvpositionIndex from "./index.vue";
export default {
  data() {
    return {
      activeName: 0,
      keys: "",
      plantList: [],
    };
  },
  components: {
    AdvpositionIndex,
  },
  created() {
    this.getDicts("/manager/api/getPlateList").then((res) => {
      this.plantList = [{ id: "0", name: "全部" }].concat(res.data);
    });
  },
  methods: {
    changeItem(item) {
      this.active = item.id;
      this.keys = Date.now();
    },
    handleClick() {},
  },
};
</script>
<style lang="scss" scoped>
.poscontent {
  // 56 导航栏的高 46 tab的高度 35 padding的高度
  height: calc(100vh - 60px);
  padding: 16px 16px 0 16px;
  //   overflow-y: auto;
  overflow: hidden;
}
.poscontent {
  ::v-deep .el-tabs__header {
    width: 100% !important;
    padding-left: 25px;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #1670f1 !important;
  }
}
.tabpostion{
  width: 100%;
  ::v-deep .el-tabs__header{
    width: 150px;
    background-color: #fff;
  }
  ::v-deep .el-tabs__nav-wrap::after{
    background-color: #fff;
  }
  ::v-deep .el-tabs__active-bar{
    background-color:#fff
  }
  ::v-deep .el-tabs__item{
    text-align: left;
    height: 46px;
    line-height: 46px;
  }
}
</style>